<template>
    <div>
        <!--页面title-->
        <mainTitleText>
            <span slot="account" class="account">事业部总列表</span>
            <span slot="accountEnglish">DIRECTOR OF THE EXHIBITION HALL</span>
        </mainTitleText>
        <div class="main">
            <!--搜索-->
            <div class="search">
                <span>共找到{{count}}个账号</span>
                <form action="" class="layui-form layui-form-pane form1">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input
                                    type="text"
                                    name="text"
                                    required=""
                                    v-model="search"
                                    onkeydown="if(event.keyCode==13)return false;"
                                    @keyup.enter="searchPush"
                                    lay-verify="required"
                                    placeholder="请输入关键字"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" @click="searchPush">
                            <i></i>
                        </label>
                    </div>
                </form>
            </div>
            <div>
                <!--表格-->
                <table id="table"
                       :formTable="formTable"
                       lay-filter='text'
                       style="width: 100%!important;"></table>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    import mainTitleText from '@/components/module/mainTitleText'
    export default {
        name: 'hallList',
        props:['urls'],
        data() {
            return {
                 count:'',//表格数据加咱总值
                 search:'',//搜索key值
            }
        },
        components: {
            'mainTitleText': mainTitleText
        },
        computed: {
            formTable() {
                var _this = this,
                    url = this.urls.hall.list;
                layui.use(['table'], function () {
                    var table = layui.table;
                    //实例
                    _this.$nextTick(function() {
                        table.render({
                            elem: '#table'
                            , id: 'idTest'
                            , height: '491'
                            , limit: 10
                            , url: url //数据接口
                            , page: {theme: '#cd1f5c'} //开启分页
                            , cols: [[
                                {field: 'numbers', title: '序号', type: 'numbers', width: 80}
                                // ,{field: 'role', title: '职位',}
                                , {field: 'telephone', title: '账号（手机号）',}
                                , {field: 'name', title: '账户名',}
                                // ,{field: 'company', title: '所属公司'}
                                , {field: 'project', title: '所属项目'}
                                // ,{field: 'distribute', title: '所属分销总'}
                            ]]
                            , done: function (res, curr, count) {//渲染完成回调，获取总条目数。
                                _this.count = count;
                                // // console.log(res, curr, count)
                            }
                        });
                    })
                });
            }
        },
        methods: {
            searchPush(){//search 获取查询数据 重载表格
                var key = this.search,
                    url = this.urls.hall.list;
                     layui.use(['table'], function () {//搜索直接更新表格数据
                         var table = layui.table;
                         table.reload('idTest', {
                              url: url,
                              where:{
                              key:key
                             }
                         });
                     })
             }
        },

    }

</script>

<style scoped lang="less">
    @import "../../static/css/style.less";
    .add {
        height: 40px;
        line-height: 40px;
        > span, > form, > button {
            .fl;
        }
        > form {

        }
        .layui-inline, select, .layui-form-select .layui-input {
            /*width: 140px !important;*/
            height: 39px !important;
            color: @c6 !important;
        }
        .layui-input-inline {
            vertical-align: initial;
        }
        .layui-btn {
            width: 80px !important;
            .br(3px);
            .blg(to right, #cd1f5c, #e11e27);
        }
    }
    .main {
        width: 100%;
        background-color: @cf;
        padding: 20px;
        .bs(0 0 5px #ccc);
        margin-top: 20px;
        display: inline-block;
        .search {
            width: 100%;
            height: 40px;
            line-height: 30px;
            padding: 5px 20px;
            background-color: #ededed;
            .pr;
            > span, > .form1 {
                .fl;
            }
            > .form1 {
                .pa;
                right: 20px;
                .layui-form-item {
                    .pr;
                    .layui-input-block {
                        width: 220px;
                        height: 30px !important;
                        margin: 0 38px 0 0;
                        input {
                            height: 30px !important;
                            .br(2px 0 0 2px);
                        }
                    }
                    label {
                        width: 40px;
                        height: 30px;
                        .pa;
                        top: 0;
                        right: 0;
                        cursor: pointer;
                        .br(0 2px 2px 0);
                        .blg(to right, #cd1f5c, #e11e27);
                        i {
                            width: 15px;
                            height: 15px;
                            display: inline-block;
                            .pa;
                            .cm;
                            .bud("../../static/images/search.svg", center center, 100% 100%);
                        }
                    }
                }
            }

        }

    }
    #edit{
        width: 100%;
        height: 100%;
        padding:20px;
        display: none;
        form{
            width: 100%;
            height: 100%;
            label{
                width: 120px;
                height: 40px;
                line-height: 40px;
                padding-right:20px;
            }
            .layui-form-item {
                margin-bottom: 15px;
                clear: both;
            }
        }
        button{
            .blg(to right,#cd1f5c,#e11e27);
        }

    }
</style>